<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<%@ include file="/WEB-INF/views/include/head.jsp"%> 
<script src="${ctxStatic}/js/layer.js"></script>
<script src="${ctxStatic}/js/style.js"></script>
<link rel="stylesheet" href="${ctxStatic}/css/common_erp.css">
<link rel="stylesheet" href="${ctxStatic}/css/list.css">
<style type="text/css">
    

    /* no  */
    .table-no{width: 80px}
    /* 订舱委托单   */
    .table-dcwtdh{width: 140px}
    /* 合同订单号  */
    .table-htddh{width: 140px}
    /* 收件人  */
    .table-sjr{width: 100px}
    /* 通知人  */
    .table-tzr{width: 100px}
    /* 交货条件  */
    .table-jhtj{width: 100px}
    /* 目的港  */
    .table-mdg{width: 100px}
    /* 交货港   */
    .table-zhg{width: 100px}
    /* 总箱数  */
    .table-zxs{width: 100px}
    /* 总件数  */
    .table-zjs{width: 100px}
    /* 总毛重  */
    .table-zmz{width: 100px}
     /* 总体积  */
    .table-ztj{width: 100px}
     /* 订舱费用  */
    .table-dcfy{width: 100px}
     /* 创建人员 */
    .table-cjry{width: 100px}
     /* 创建日期 */
    .table-cjrq{width: 100px}
   
    
    </style>

<script type="text/javascript">
    $(document).ready(function() {
		
		searchListForm();
		
            $(".tabBox ul li").each(function(){
                var index=$(this).index();

                $(".tabBox ul li").eq(0).addClass("active");

                $(this).click(function(){

                    $(this).addClass("active").siblings().removeClass("active");
                    
                    $("#tabPageStatus").val($(this).val());
                    searchListForm();

                    $(".tabBoxSm > .tabSm").eq(index).stop(true).show().siblings().stop(true).hide();
					
					var tableW = $(".tabBoxSm > .tabSm").eq(index).find('.tableHead').width();
					var tabodyH = $(".tabBoxSm > .tabSm").eq(index).find('.tableBody').height();
					var tableScrollH = $(".tabBoxSm > .tabSm").eq(index).find('.tableScroll').height();
					if(tabodyH>tableScrollH){
						$(".tabBoxSm > .tabSm").eq(index).find('.tableScroll').css('width',tableW + 18 + 'px')
					}else{
						$(".tabBoxSm > .tabSm").eq(index).find('.tableScroll').css('width','inherit')
					}

                })

            })

        });
    
    // 检索方法
	function searchListForm() {
		var params = $("#searchForm").serialize();
		$("#activity_pane").showLoading();
		$.post("${ctx}/bookingspace/single/searchList",params,function(result) {
					var listHtml = result["bookingOrders"];
					var pageHtml = result["page"];
					$("#listHtml").html(listHtml);
					$("#paging").html(pageHtml);
					$("#activity_pane").hideLoading();
				}, 'json');
	}
	
	// 重置方法
	function clearParam() {
		$("#indentId").val("");
		$("#ognizationNameB").val("");
		$("#dateStart").val("");
		$("#dateEnd").val("");
		searchListForm();
	}
	//导出excel
	function exportExcel() {
   		var dateStart = $("#dateStart").val();
   		var dateEnd = $("#dateEnd").val();
   		if (dateStart == "" || dateEnd == "") {
   			tipParent("请选择开始日期和结束日期");
			return;
		}
   		$("#activity_pane").showLoading();
		window.location.href='${ctx}/bookingspace/single/exportExcel?dateStart='+dateStart+'&dateEnd='+dateEnd;
 		$("#activity_pane").hideLoading();
	}
	
	/* 日期  */
	var dateFmt;
	/**
	* 检验日期格式是否正确 ，如果格式正确，检验该日期是否为正确日期
	* 要求格式：yyyy-MM-dd 或  yyyyMMdd
	*/
    function DATECHECK(dateValue) {
        var date = dateValue;
        var result1 = date.match(/^(\d{4})(-)(\d{2})\2(\d{2})$/);
		var result2 = date.match(/^(\d{4})(\d{2})(\d{2})$/);
		var d;
        if (result1 != null){
        	d = new Date(result1[1], result1[3] - 1, result1[4]);
        	dateFmt = d;
        	return (d.getFullYear() == result1[1] && (d.getMonth() + 1) == result1[3] && d.getDate() == result1[4]);
        } else if(result2 != null){
        	d = new Date(result2[1], result2[2] - 1, result2[3]);
        	dateFmt = d;
        	return (d.getFullYear() == result2[1] && (d.getMonth() + 1) == result2[2] && d.getDate() == result2[3]);
        }
        return false;
    }

	function CheckDate(obj) {
        var ret = true;
        if (obj.value == "") {
        	ret = false;
        }else if (!DATECHECK(obj.value)) {
            alert("请输入正确的日期，日期格式yyyy-MM-dd或yyyyMMdd");
            obj.value = "";
            ret = false;
        }else{
        	obj.value = dateFormat("yyyy-MM-dd", dateFmt);
        }
        return ret;
    }
    
function dateFormat(str,d) {    
		if( checkNull(str)){  //如果格式化字符为空，返回空字符    
		        return "";      
		}  
		if(checkNull(d)){  //如果日期为空，自动获取当前日期    
		    d=new Date();      
		}else if(d.constructor!=Date){//如果参数不是一个日期对象，就认为是一个标准Long值日期  
		    d=new Date(d);  
		}  
		 return  str.replace("yyyy",d.getFullYear()).replace("MM",fillZero(d.getMonth()+1)).replace("dd",fillZero(d.getDate()));    
	}    
	  
	//填充0    
	function fillZero(value){    
		if(value.toString().length<2){    
		    return "0"+value;    
		}    
		return value;    
	}    
	//判空    
	function checkNull(value){    
		if(!value||value==null||typeof(value) == "undefined"||value==""){    
		return true;    
		}    
		return false;    
	}    
	
	//| 日期有效性验证 
	//| 格式为：YYYY-MM-DD或YYYY/MM/DD  
	function IsValidDate(DateStr){ 
	  var sDate=DateStr.replace(/(^\s+|\s+$)/g,'');//去两边空格; 
	  if(sDate==''){ 
	    return true; 
	  } 
	  //如果格式满足YYYY-(/)MM-(/)DD或YYYY-(/)M-(/)DD或YYYY-(/)M-(/)D或YYYY-(/)MM-(/)D就替换为'' 
	  //数据库中，合法日期可以是:YYYY-MM/DD(2003-3/21),数据库会自动转换为YYYY-MM-DD格式 
	  var s=sDate.replace(/[\d]{ 4,4 }[\-]{1}[\d]{1,2}[\-]{1}[\d]{1,2}/g,''); 
	  if(s==''){//说明格式满足YYYY-MM-DD或YYYY-M-DD或YYYY-M-D或YYYY-MM-D 
	    var t=new Date(sDate.replace(/\-/g,'/')); 
	    var ar=sDate.split(/[-/:]/); 
	    if(ar[0]!=t.getYear()||ar[1]!=t.getMonth()+1||ar[2]!=t.getDate()){//alert('错误的日期格式！格式为：YYYY-MM-DD或YYYY/MM/DD。注意闰年。'); 
	    alert("1请输入正确的日期");
	      return false; 
	    } 
	  }
	  return true; 
	} 
  
</script>
</head>
<body>

<form id="searchForm" method="post">
<div class="listArea" id="activity_pane">
	<div class="listBg">
        <div class="searchArea clearfix">
            <div class="searchLeft clearfix">
                <%-- <!-- 合同订单号 -->
                <div class="searchInp clearfix">
                    <p><spring:message code="contractorder_ID"/></p>
                    <input type="text" class="w-styleNub" id="indentId" name="indentId">
                </div> --%>
                <!-- 客户 -->
                <div class="searchInp clearfix">
                    <p><spring:message code="Bookingorders_customer"/></p>
                    <input type="text" class="w-styleNub" id="ognizationNameB" name="ognizationNameB">
                </div>
                <!-- 日期 -->
                <div class="searchInp clearfix">
                    <p><spring:message code="inventory_Inbound_date"/></p>
                    <div class="timeBox">
							<input type="text" class="laydate-icon" onclick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd',onpicked:null})"
								id="dateStart" name="dateStart" style="width: 110px">
							<p class="list">~</p>
							<input type="text" class="laydate-icon" onclick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd',onpicked:null})" 
								id="dateEnd" name="dateEnd" style="width: 110px" >
                    </div> 
                </div>
            </div>	
            <div class="searchRight clearfix">
            	<!-- 导出 -->
                <button type="button" onclick="exportExcel();">导出</button>
                <!-- 检索 -->
                <button type="button" onclick="searchListForm();"><spring:message code="commom_check"/></button>
                <!-- 重置 -->
                <button type="button" onclick = "clearParam()"><spring:message code="common_reset"/></button>
                <!-- 创建 -->
                <button type="button" onclick="popup('1000px','584px','${ctx}/bookingspace/single/createbookorder')"><spring:message code="common_create"/></button>
            </div>								
        </div>
    </div>
   
    <input type="hidden" id="tabPageStatus" name="tabPageStatus" value="0"/>
    <div class="tabBox">
        <ul class="clearfix">
            <li class="active" value="0"><spring:message code="Bookingorders_tab_all"/></li>
            <li value="1">新建</li>
            <li value="2">已提交</li>
            <li value="3"><spring:message code="consignmentNote_tab_del"/></li>
        </ul>
	</div>
	 
    <div class="listBg tabPadding overflowX">
        <div class="tableArea tabBoxSm">
            <div class="tableScrollSm" style = "height:650px;width: 1452px;overflow: auto;">
                <table cellpadding="0" class="tableHead" >
                    <thead>
                    <tr>
                        <th><p class="table-no"><spring:message code="Bookingorders_no"/></p></th>
                        <th><p class="table-dcwtdh"><spring:message code="Bookingorders_ID"/></p></th>
                        <th><p class="table-sjr"><spring:message code="Bookingorders_recipient"/></p></th>
                        <th><p class="table-tzr"><spring:message code="Bookingorders_Notify"/></p></th>
                        <th><p class="table-jhtj"><spring:message code="Bookingorders_jhtj"/></p></th>
                        <th><p class="table-zhg"><spring:message code="Bookingorders_portofloading"/></p></th>
                        <th><p class="table-mdg"><spring:message code="Bookingorders_portofdestination"/></p></th>
                        <th><p class="table-zxs"><spring:message code="Bookingorders_totalnumberofcases"/></p></th>
                        <th><p class="table-zjs"><spring:message code="Bookingorders_totalnumber"/></p></th>
                        <th><p class="table-zmz"><spring:message code="Bookingorders_Totalgrossweight"/></p></th>
                        <th><p class="table-ztj"><spring:message code="Bookingorders_totalvolume"/></p></th>
                        <th><p class="table-dcfy"><spring:message code="Bookingorders_Bookingfee"/></p></th>
                        <th><p class="table-cjry"><spring:message code="Bookingorders_Createpersonnel"/></p></th>
                        <th><p class="table-cjrq"><spring:message code="Bookingorders_CreateTime"/></p></th>
                    </tr>
                    </thead>
                </table>
                <table cellpadding="0" class="tableBody">
                    <tbody id="listHtml">
                    </tbody>
                </table>	
            </div>
        </div>
    </div>
    <div id = "paging" ></div>
</div>
</form>
</body>
</html>